<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <form>
    <p>
      <!--使用v-model指令和data中某个属性关联之后，
        输入框的数据会自动的放到对应的属性中
        对应的属性值发生改变之后，输入中显示的数据也会改变
        -->
      用户名： <input type="text" v-model="user.userName">
    </p>
    <p>
      年龄：　<input type="text" v-model="user.userAge">
    </p>
    <p>
      性别：　
      <input type="radio" value="0" v-model="user.gender"> 女
      <input type="radio" value="1" v-model="user.gender"> 男
    </p>
    <p>
      爱好：　
      <input type="checkbox" value="sport" v-model="user.hobbies"> 运动
      <input type="checkbox" value="film" v-model="user.hobbies"> 电影
      <input type="checkbox" value="game" v-model="user.hobbies"> 游戏
      <input type="checkbox" value="study" v-model="user.hobbies"> 学习
    </p>
    <input type="button" value="添加用户" @click="addUser()">
  </form>
  <!--为了方便观察v-mode对数据的设置，直接把user显示一下-->
  <div>
    {{user}}
  </div>
</div>

<script src="js/vue.js"></script>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      // 定义用户对象，来接收用户输入值
      user: {
        userName: '李四',
        userAge: 20,
        gender: 1,
        hobbies: ['film']
      }
    },
    methods: {
      addUser: function () {
        alert("做添加用户的操作！")
        // 如果要在方法中获取data中的数据的话，要通过 this.属性名 的方式来获取
        console.log( this.user )
        console.log("1111",user)
      }
    }
  });
</script>
</body>
</html>
